<template>
	<el-container>
		<el-container>
			<el-main class="leftPanel">
				<el-row class="searchBox">
					<el-input
						placeholder="请输入应用的名称"
						v-model="form.appName"
						prefix-icon="jd-icon-search"
						maxlength="30"
						class="input"
					>
						<template #prepend>
							<jd-select v-model="form.appType" dict="sys_app_types" dataType="String" placeholder="应用分类" class="select"></jd-select>
						</template>
						<template #append>
							<el-button @click="searchApp">搜 索</el-button>
						</template>
					</el-input>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-card class="appbox-card" shadow="always">
							<template #header>
								<div class="card-header">
									<span>全部应用</span>
									<el-button text icon="el-icon-plus" @click="createApp">创建微应用</el-button>
								</div>
							</template>
							<el-carousel height="400px" :autoplay="false" indicator-position="none">
								<el-carousel-item v-for="item in 4" :key="item">
									<el-row>
										<el-col :xl="4" :lg="6" :md="6" v-for="o in 22" :key="o" style="padding: 5px 10px;">
											<el-card shadow="never">
												<div style="text-align:center">
													<jd-icon-dict class="app-icon"/>
												</div>
												<div class="app-name">
													{{ '应用名称 ' + o }}
												</div>
											</el-card>
										</el-col>
									</el-row>
								</el-carousel-item>
							</el-carousel>
						</el-card>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
		<el-aside class="rightPanel">
			<el-container>
				<el-header class="nowTime">{{ nowTime }}</el-header>
				<el-main style="background: #FFF;">
					<el-card class="applog-card">
						<template #header>
						<div class="card-header">
							<span>应用日志</span>
							<el-button text>更多 &gt;</el-button>
							<!-- <el-icon-arrow-right style="width: 20px;fill: #FF9900;"/> -->
						</div>
						</template>
						<div class="card-content">
							<div v-for="o in 20" :key="o" class="text item">
								<el-row>
									<el-col :span="16">{{ '张三发布了App应用 ' + o }}</el-col>
									<el-col :span="8">03-13 12:00</el-col>
								</el-row>
							</div>
						</div>
					</el-card>
				</el-main>
			</el-container>
		</el-aside>
	</el-container>

	<!-- <create-dialog v-if="dialog.appCreate" @close="refresh" ref="createDialog"  @success="handleSaveSuccess" @closed="dialog.appCreate=false"></create-dialog> -->
</template>

<script>

	//import createDialog from './create';

	export default {
		name: 'appStore',
		// components: {
		// 	createDialog,
		// },
		data() {
			return {
				timer: "", //定义一个定时器
        		nowTime: "",
				dialog: {
					appCreate: false
				},
				form:{
					appName: "",
					appType: ""
				},
			}
		},
		created() {
			this.getTime();
		},
		methods: {
			// 获取当前时间
			getTime() {
				this.timer = setInterval(() => {
					let timeDate = new Date();
					let year = timeDate.getFullYear();
					let mounth = timeDate.getMonth() + 1;
					let day = timeDate.getDate();
					let hours = timeDate.getHours();
					hours = hours >= 10 ? hours : "0" + hours;
					let minutes = timeDate.getMinutes();
					minutes = minutes >= 10 ? minutes : "0" + minutes;
					let seconds = timeDate.getSeconds();
					seconds = seconds >= 10 ? seconds : "0" + seconds;
					let week = timeDate.getDay();
					let weekArr = [
						"星期日",
						"星期一",
						"星期二",
						"星期三",
						"星期四",
						"星期五",
						"星期六",
					];

					this.nowTime = `${year}-${mounth}-${day} ${hours}:${minutes}:${seconds} ${weekArr[week]}`
				}, 1000);
			},
			// 应用创建
			createApp(){
				this.dialog.appCreate = true;
				this.$nextTick(() =>{
					this.$refs.createDialog.open();
				})
			},
			// 应用搜索
			searchApp(){

			},
		},
		beforeUnmount() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		}
	}
</script>
<style lang="scss">
.leftPanel{
	background: #FFF;
	padding: 30px; 
	padding-right:15px;
	border: 0px;
	overflow: hidden;

	.searchBox{
		margin: 0px auto;
		width:600px;
		margin-top: calc((100vh - 680px)/2);
		margin-bottom: calc((100vh - 680px)/2);

		.input{
			width: 550px;
			height:45px;
			line-height:45px;
			font-size: 16px;
			border: solid 2px #dcdfe6;
			border-radius: 6px;
			position: relative;

			.el-input-group__prepend,.el-input__wrapper {
				position: relative;
				box-shadow: none !important;
				width: 120px;

				.select{
					position:absolute;
					clip:rect(2px 120px 30px 2px);
					width:120px;
					height:30px;
					line-height:30px;
					font-size:15px;
					left: 10px;
					top:3px;
					font-weight:bold;
				}
			}
			
			.el-input-group__append{
				background: #409EFF;
				color: #FFF;
				width: 90px;
			}
		}
	}

	.appbox-card{
		width: 100%;
		height: 500px;
		overflow: hidden;
		
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.app-icon{
			width:120px;
			fill: rgba(253, 253, 253, 0.65) !important; 
			background-color: #409EFF;
			padding: 30px; 
			border-radius: 12px;
		}
		.app-name{
			text-align: center;
			margin-top:10px;
			font-size: 14px;
		}
	}
}
.rightPanel{
	width: 360px;
	border: 0px !important;

	.nowTime{
		border: 0px; 
		font-size: 18px; 
		font-weight: bolder; 
		font-family:Verdana, Geneva, Tahoma, sans-serif; 
		justify-content: center;
		padding: 0px;
		height: 90px;
		padding-top: 20px;
	}

	.applog-card{
		width: 100%;
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.card-content{
			height: calc(100vh - 300px);
			overflow-y: auto;

			.item{
				font-size: 14px;
				margin-bottom: 18px;
			}
		}
	}
}

</style>